<template>
    <div>
        <el-form :model="customer" ref="form" label-width="120px" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="名称：" prop="supName">
                        <el-input v-model="customer.supName" placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="联系人：" prop="supContacts">
                        <el-input v-model="customer.supContacts" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="手机号码：" prop="supPhonenumber">
                        <el-input v-model="customer.supPhonenumber" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="联系电话：" prop="supContactnumber">
                        <el-input v-model="customer.supContactnumber" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="电子邮箱：" prop="supEmail">
                        <el-input v-model="customer.supEmail" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="传真：">
                        <el-input v-model="customer.supFax" placeholder="请输入传真"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="期初应收：">
                        <el-input v-model="customer.supBeginreceipt" placeholder="请输入期初应收"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="期末应收：">
                        <el-input v-model="customer.supEndreceipt" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="纳税人识别号：">
                        <el-input v-model="customer.supTaxpayerNum" placeholder="请输入纳税人识别号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="税率(%):">
                        <el-input v-model="customer.supTaxRate" placeholder="请输入税率"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="开户行：">
                        <el-input v-model="customer.supOpenBank" placeholder="请输入开户行"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="账号：">
                        <el-input v-model="customer.supAccountNumber" placeholder="请输入账号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="地址：">
                        <el-input v-model="customer.supAddress" placeholder="请输入地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="排序：">
                        <el-input v-model="customer.sort" placeholder="请输入排序"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="备注：">
                        <el-input
                            v-model="customer.remark"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea"
                            placeholder="请输入备注"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="height: 30px">
                <el-col :span="24" :offset="0">
                    <el-form-item style="float: right;">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="onSubmit(form)">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import {defineEmits,defineProps, ref} from 'vue'
import reqeust from '@/api/request'
import { ElMessage } from 'element-plus';

let emits = defineEmits(['close'])
let props = defineProps(['data'])

let customer = ref({...props.data})

let form = ref()

//校验规则
let rules = {
    supName:[
        { required: true, message: '请输入名称!', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    supContacts:[
        { required: true, message: '请输入联系人！', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    supPhonenumber:[
        { required: false, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
    ],
    supContactnumber:[
        { required: false, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
    ],
    supEmail:[
        { required: false, type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
    ]
}

//修改
let onSubmit =(formEl)=>{
    formEl.validate(valid => {
        if (valid) {
            reqeust.put("/basic/vendor/update", customer.value,{
                body: JSON.stringify(customer.value)
            }).then(resp=>{
                ElMessage.success(resp.data)
                emits('close')
            }).catch((err)=>{
                ElMessage.error(err)
            })
        }
    })
}

let close = ()=>{
    emits('close')
}

</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 350px;
}
</style>
